import React from 'react';
import ControlPointDuplicateOutlined from '@material-ui/icons/ControlPointDuplicateOutlined';
import NavigateNextOutlined from '@material-ui/icons/NavigateNextOutlined';
import NavigateBeforeOutlined from '@material-ui/icons/NavigateBeforeOutlined';
import RemoveOutlined from '@material-ui/icons/RemoveOutlined';
import AddOutlined from '@material-ui/icons/AddOutlined';
import Build from '@material-ui/icons/Build';
import AcUnitOutlined from '@material-ui/icons/AcUnitOutlined';
import Edit from '@material-ui/icons/Edit';
import ImageOutlined from '@material-ui/icons/ImageOutlined';
import AccountBalanceWalletOutlined from '@material-ui/icons/AccountBalanceWalletOutlined';
import BuildOutlined from '@material-ui/icons/BuildOutlined';
import DateRangeOutlined from '@material-ui/icons/DateRangeOutlined';
import SwapVertOutlined from '@material-ui/icons/SwapVertOutlined';
import WidgetsOutlined from '@material-ui/icons/WidgetsOutlined';
import DashboardOutlined from '@material-ui/icons/DashboardOutlined';
import KeyboardBackspaceOutlined from '@material-ui/icons/KeyboardBackspaceOutlined';
import AddCircleOutlineOutlined from '@material-ui/icons/AddCircleOutlineOutlined';
import DeleteSweepOutlined from '@material-ui/icons/DeleteSweepOutlined';
import InfoOutlined from '@material-ui/icons/InfoOutlined';
import SelectAllOutlined from '@material-ui/icons/SelectAllOutlined';
import DeleteOutlineSharp from '@material-ui/icons/DeleteOutlineSharp';
import AttachFileOutlined from '@material-ui/icons/AttachFileOutlined';
import BallotOutlined from '@material-ui/icons/BallotOutlined';
import EditOutlined from '@material-ui/icons/EditOutlined';
import CallSplitOutlined from '@material-ui/icons/CallSplitOutlined';
import CallMadeOutlined from '@material-ui/icons/CallMadeOutlined';
import { CmdItem } from './base';
import { LeftBadge, g_style } from './st';
import { is_empty, BtMenu } from '../../nui';
import { loc } from '../../local';

const get_color = (cl) => g_style[cl].color;

/* with left badge
 *
 * hcmd: hcmd(uid)
*/
const Mcmd = ({ pid="btcmd", uid, hcmd, title, cl="blue", pos="bottom", itype, disabled }) => {
    const c = get_color(cl);

    const get_icon = () => {
        if (itype === "tech") {
            return <DashboardOutlined style={{ color: c }}/>;
        }
        else if (itype === "open") {
            return <CallMadeOutlined style={{ color: c }}/>;
        }
        else if (itype === "next") {
            return <NavigateNextOutlined style={{ color: c }}/>;
        }
        else if (itype === "prev") {
            return <NavigateBeforeOutlined style={{ color: c }}/>;
        }
        else if (itype === "bom") {
            return <BallotOutlined style={{ color: c }}/>;
        }
        else if (itype === "remove") {
            return <RemoveOutlined style={{ color: c }}/>;
        }
        else if (itype === "fix") {
            return <AcUnitOutlined style={{ color: c }}/>;
        }
        else if (itype === "move") {
            return <ControlPointDuplicateOutlined style={{ color: c }}/>;
        }
        else if (itype === "pic") {
            return <ImageOutlined style={{ color: c }}/>;
        }
        else if (itype === "date") {
            return <DateRangeOutlined style={{ color: c }}/>;
        }
        else if (itype === "part") {
            return <CallSplitOutlined style={{ color: c }}/>;
        }
        else if (itype === "add") {
            return <AddCircleOutlineOutlined style={{ color: c }}/>;
        }
        else if (itype === "addout") {
            return <AddOutlined style={{ color: c }}/>;
        }
        else if (itype === "ret") {
            return <KeyboardBackspaceOutlined style={{ color: c }}/>;
        }
        else if (itype === "file") {
            return <AttachFileOutlined style={{ color: c }}/>;
        }
        else if (itype === "swap") {
            return <SwapVertOutlined style={{ color: c }}/>;
        }
        else if (itype === "state") {
            return <WidgetsOutlined style={{ color: c }}/>;
        }
        else if (itype === "filledit") {
            return <Edit style={{ color: c }}/>;
        }
        else if (itype === "edit") {
            return <EditOutlined style={{ color: c }}/>;
        }
        else if (itype === "mt") {
            return <Build style={{ color: c }}/>;
        }
        else if (itype === "build") {
            return <BuildOutlined style={{ color: c }}/>;
        }
        else if (itype === "del") {
            return <DeleteOutlineSharp style={{ color: c }}/>;
        }
        else if (itype === "flow") {
            return <AccountBalanceWalletOutlined style={{ color: c }}/>;
        }

        return <SelectAllOutlined style={{ color: c }}/>;
    };

    if (!hcmd) {
        return null;
    }

    return (
        <LeftBadge>
            <CmdItem pos={pos} hcmd={hcmd} uid={uid} id={pid + uid} title={title} icon={get_icon()} disabled={disabled}/>
        </LeftBadge>
    );
};

/* delete icon button with tooltip
 * start waiting when click, never stop waiting
 *
 * if hcmd is empty, return null
 *
 * click: hcmd(uid, key, umd);
 */
const MDel = ({ umd, hcmd, uid, lst=null, cl="blue", title, disabled }) => {
    if (!lst) {
        const hDel = (uid) => {
            if (umd) {
                umd.startWait();
            }
            hcmd(uid, "del", umd);
        };

        return (
            <CmdItem
                title={title || loc("sc")}
                cfm={loc("qdsc")}
                icon={<DeleteOutlineSharp style={{ color: get_color(cl) }}/>}
                hcmd={hcmd ? hDel : null}
                uid={uid}
                wait={false}
                disabled={disabled}
                id={`btdel${uid}`}/>
        );
    }

    const handleDel = (key) => {
        if (is_empty(lst)) {
            return;
        }

        const f = lst.find(d => d.key === key);
        if (!f) {
            return;
        }

        if (window.confirm(`${loc("qd")}${f.val}`)) {
            if (umd) {
                umd.startWait();
            }
            hcmd(uid, key, umd);
        }
    };

    return <BtMenu disabled={disabled} id={`btdel${uid}`} hcmd={handleDel} lst={lst} title={loc("sc")}
        licon={<DeleteSweepOutlined style={{ color: get_color(cl) }}/>}/>;
};

/* hcmd: hcmd(uid)
 */
const More = ({ uid, hcmd, cl="blue", pos="bottom", disabled }) => <CmdItem
    title={loc("ckgd")}
    icon={<InfoOutlined style={{ color: get_color(cl) }}/>}
    hcmd={hcmd}
    uid={uid}
    pos={pos}
    disabled={disabled}
    id={"btmore" + uid}/>;

export {Mcmd, MDel, More};
